<template>
    <div ref='minImg' class="min-img">
        <img v-if="minSrc" :src="minSrc" @load="setClass()" ref="img" :class="{'set':set}">
    </div>
</template>
<script>
/**
 * 功能 图片智能居中显示 组件容器需显示指定宽高。只需传图片地址即可
 * @Author: lizuping
 * @Date: 2018-07-10
 * @Last Modified by: lizuping
 * @Last Modified time: 2018-07-12 09:08:09
 */
let cssget = function (e, str) {
    return window.getComputedStyle ? window.getComputedStyle(e, null).getPropertyValue(str) : e.currentStyle.getAttribute(str);
};
export default {
    name: 'minImg',
    data () {
        return {minSrc: false, wh: 0, set: false
        };
    },
    props: {
        src: {
            type: String,
            default () {
                return '';
            }
        }
    },
    watch: {
        src () {
            this.minSrc = this.src || false;
        }},
    methods: {setClass () {
        let dom = this.$refs.img;
        this.set = this.wh < parseInt(cssget(dom, 'width')) / parseInt(cssget(dom, 'height'));
    }},
    mounted () {
        let dom = this.$refs.minImg;
        this.minSrc = this.src || false;
        this.wh = parseInt(cssget(dom, 'width')) / parseInt(cssget(dom, 'height'));
    }
};
</script>
<style>
.min-img{width: 100%;height: 100%;overflow: hidden;border:1px solid #000;position: relative;}
.min-img img{display: block;border:none;width: 100%;transform: translate3d(0,-50%,0);position: absolute;left: 0;top:50%}
.min-img .set{height: 100%;transform: translate3d(-50%,0,0);width: auto;left: 50%;top:0}
</style>
